<template>
  <div class="event animate__animated animate__fast"
    :class="[{ animate__fadeInRightBig: isshow == 1 }, { animate__fadeOutRightBig: isshow == 2 }]" v-show="isshow != 0">
    <div class="flex event_return" @click="emits('update:isshow', 2)">
      <span class="iconfont icon-arrowLeft"></span>
      <span>返回仪表盘</span>
    </div>
    <TitleEvent title="最近事件" event-name="添加事件" @add="addEvent" />
    <main>
      <div class="item" v-for="item in recentEvents">
        <RecentEvent :key="item.id" :item="item" />
      </div>

    </main>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import TitleEvent from '@/components/titleHeader/index.vue';
import RecentEvent from '@/components/recentevent/index.vue';
import { IEvent } from '@/types/user';
import { allEventApi } from '@/api/eventApi';
defineProps<{ isshow: number }>()
const emits = defineEmits(["update:isshow"])


// 最近事件
const recentEvents = ref<IEvent[]>([])

onMounted(() => {
  allEventApi().then(res => {
    recentEvents.value = res.data
  })
})


function addEvent() {
  console.log("添加事件");

}


</script>

<style scoped lang="scss">
.event {
  position: absolute;
  inset: 0;
  background-color: #f4f4f4;
  z-index: 99;
  padding: 20px 0;

  &_return {
    color: #3F8CFF;
    font-size: 14px;
    gap: 5px;
    align-items: center;
    width: max-content;
    border-bottom: 1px solid transparent;


    .iconfont {
      font-size: 20px;
      font-weight: bold;
    }

    &:hover {
      border-bottom: 1px solid #3F8CFF;
    }
  }

  >main {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    // height: 100%;
    gap: 34px;
    margin-top: 40px;
    overflow: hidden;

    .item {
      height: max-content;
      border-radius: 20px;
      background-color: white;


    }
  }
}
</style>